<template>
  <div class="train">
    <header>
      <div>
        创建时间
        <el-date-picker v-model="value1" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
          :default-time="defaultTime1" />
      </div>
      <div>
        车次类型<el-select v-model="value" class="m-2" placeholder="全部">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div>
        <el-input v-model="input" class="w-50 m-2" placeholder="搜索ID/车次" :prefix-icon="Search" />
      </div>
      <div>
        <a-button type="primary" :icon="h(PlusOutlined)" @click="add">新增车次</a-button>
      </div>
    </header>
    <main>
      <el-table :data="trainStore.trainList" style="width: 100%">
        <el-table-column fixed prop="key" label="Id" width="150" />
        <el-table-column prop="train_type" label="车次/类型" width="120">
          <template #default="{ row }">
            <p><span>{{ trainType(row.type) }}</span>{{ row.train_num }}</p>
            <p>{{ row.type }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="车长" width="120" />
        <el-table-column prop="all_seat" label="总座位数" width="120" />
        <el-table-column prop="carriage" label="车厢数量" width="120" />
        <el-table-column prop="ride" label="限乘人数" width="120" />
        <el-table-column prop="create_time" label="创建时间" width="400" />
        <el-table-column props="state" label="状态" width="120">
          <template #default="{ row }">
            <el-switch v-model="row.state" class="ml-2" width="60" inline-prompt active-text="启用" inactive-text="停用" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="Operations" width="120">
          <template #default="{ row }">
            <img style="width: 30px; height: 30px;" src="../../../public/img/png/编辑.png" alt="" @click="edit(row)">
            <img style="width: 30px; height: 30px;" src="../../../public/img/png/Del.png" alt="" @click="del(row)" />
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="demo-pagination-block">
        <div class="demonstration">Jump to</div>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :small="small" :disabled="disabled"
          :background="background" layout="prev, pager, next, jumper" :total="1000"
          @current-change="handleCurrentChange" />
      </div> -->
      <a-modal v-model:open="visible" :title="title" ok-text="Create" cancel-text="Cancel" @ok="onOk">
        <a-form ref="formRef" :model="formData" layout="vertical" name="form_in_modal">
          <a-form-item name="key" label="Id" v-if="type === 'edit'">
            <a-input v-model:value="formData.key" :disabled="type === 'edit'" />
          </a-form-item>
          <a-form-item name="type" label="类型">
            <a-input v-model:value="formData.type" />
          </a-form-item>
        </a-form>
      </a-modal>
    </main>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRaw, onMounted, h } from 'vue';
import { useTrainStore } from '@/stores/counter'
import * as api from '@/api/index'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { PlusOutlined } from '@ant-design/icons-vue';

type Options = {
  value: String,
  label: String
}

const trainStore = useTrainStore()

// 时间选择
const value1 = ref('')
const defaultTime1: Date = new Date(2000, 1, 1, 12, 0, 0) // '12:00:00'
const defaultTime2: [Date, Date] = [
  new Date(2000, 1, 1, 12, 0, 0),
  new Date(2000, 2, 1, 8, 0, 0),
] // '12:00:00', '08:00:00'


// 车次类型
const value = ref('')
const options: Array<Options> = [
  {
    value: '全部',
    label: '全部',
  },
  {
    value: '高铁',
    label: '高铁',
  },
  {
    value: '动车',
    label: '动车',
  },
  {
    value: '快车',
    label: '快车',
  }
]

const trainType = (type: string) => {
  switch (type) {
    case '高铁':
      return 'G'

    case '动车':
      return 'D'

    case '快车':
      return 'K'
  }
}

// 搜索框

const input = ref('')


onMounted(() => {
  api.TrainList(trainStore)
  console.log(trainStore)
})

let title = ref('新增车次')
let formData: any = ref({})
let type = ref('edit')

// 表格
const edit = (item: any) => {
  console.log('click', item)
  title.value = '修改'
  visible.value = true
  type.value = 'edit'
  formData.value = item
  console.log(formData)
}

const del = (item: any) => {
  trainStore.delTrainList(item.key)
  ElMessage({
    message: '删除成功',
    type: 'success',
  })
}

const add = () => {
  title.value = '新增车次'
  visible.value = true
  type.value = 'add'
  formData.value = {}
}

// 弹出框
const formRef = ref<any>();
const visible = ref(false);

const onOk = () => {
  formRef.value
    .validateFields()
    .then((values: any) => {
      console.log('Received values of form: ', values);
      console.log('formState: ', toRaw(formData.value));
      visible.value = false;
      formRef.value.resetFields();
      console.log('reset formData.value: ', toRaw(formRef));
    })
    .catch((info: any) => {
      console.log('Validate Failed:', info);
    });
};


// 分页
// const currentPage = ref(1)
// const pageSize = ref(10)
// const small = ref(false)
// const background = ref(false)
// const disabled = ref(false)

// let list = ref(trainStore.trainList)

// const handleCurrentChange = (val: number) => {
//   console.log(`current page: ${val}`)
//   let start = (val - 1) * pageSize.value
//   let end = start + pageSize.value
//   console.log(start, end)
//   console.log(list.value.slice(Number(start), Number(end)))
// }

</script>

<style lang="scss" scoped>
.train {
  width: 100%;
  height: 100%;

  header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>